<!-- MediaLibraryItem.vue -->
<template>
  <div class="library-item flex items-center justify-between p-3 cursor-pointer">
    <div class="flex items-center gap-3">
      <slot></slot>
      <div>
        <div class="text-white">{{ title }}</div>
        <div class="text-xs text-gray-400">{{ count }}个文件</div>
      </div>
    </div>
    <div class="text-gray-400">{{ size }}</div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  title: String
  count: Number
  size: String
}
// eslint-disable-next-line vue/no-setup-props-destructure
const { title, count, size } = defineProps<Props>()
</script>
<style lass="scss" scoped>
.library-item {
  @apply transition-all duration-300 ease-in-out;
  background: rgba(219, 219, 219, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(219, 219, 219, 0.4);

  &:hover {
    @apply !bg-[#f5f5f550] !border-[1px] !border-[#e6e6e6];
  }
}
</style>
